<!--
 * @Descripttion:  
 * @version: V1.0
 * @Author: GW
 * @Date: 2021-08-12 11:20:30
 * @LastEditors: GW
 * @LastEditTime: 2021-08-12 16:15:12
-->
<template>

  <div class="content-wrapper a-base-container">
    <div>
      <!-- 按钮 -->
      <a-row class="anayle_row anayle_tl" type="flex">
        <a-col v-for="(item,index) in menu_buttom" :key="index" class="anayle_bott" @click="showModal(item)">{{item.name}}</a-col>
      </a-row>
      <a-row>
        <a-col :span="4" class="anayle_menu">
          <a-col class="anyle_type">
            <a-col>分类</a-col>
            <a-col>
              <a-icon type="plus-circle" />
            </a-col>
          </a-col>
          <!-- 右侧菜单 -->
          <a-col :class="switch_id == item.id ? 'anyle_type_list_click' : 'anyle_type_list' " v-for="(item,index) in new_class" :key="index" @click="class_type(item)">
            <a-col>{{item.name}}</a-col>
            <a-col class="anayle_type_icon">
              <a-icon type="form" />
              <a-icon type="delete" />
            </a-col>
          </a-col>
        </a-col>
        <!-- 列表 -->
        <a-row :span="20" id="anayle_list">
          <!-- <dnd-zone :transition-duration="0.3" :move="dd">
            <dnd-container :dnd-model="meterlist" >
              <dnd-item v-for="(b,index) in meterlist" :key="b.id" :dnd-id="b.id" :dnd-model="b" >
                <a-col :span="5" class="anayle_class">
                  <a-row class="anayle_class_top" type="flex" @click="opts">
                    <a-col>
                      {{b.name}}
                    </a-col>
                    <a-col class="anayle_class_type_c">
                      {{b.name}}
                    </a-col>
                    <a-col>
                      <a-icon type="delete" />
                    </a-col>
                  </a-row>
                  <a-col class="anayle_class_center">{{b.text}}</a-col>
                  <a-col class="anayle_class_bottom" @click="design_list">
                    <a-row type="flex" >
                      <a-col class="anayle_add">
                        <a-icon type="pic-left" />
                      </a-col>
                    </a-row>
                  </a-col>
                </a-col>
              </dnd-item>
            </dnd-container>
          </dnd-zone> -->
          <dnd-zone :transition-duration="0.3">
            <dnd-container :dnd-model="meterlist" dnd-id="grid-example" class="row" dense>
              <dnd-item v-for="image in meterlist" :key="image.id" :dnd-id="image.id" :dnd-model="image" >
                <v-col cols="4" class="anayle_class">
                  <div >{{image.name}}</div>
                </v-col>
              </dnd-item>
            </dnd-container>
          </dnd-zone>
        </a-row>
      </a-row>
      <!-- 弹窗 -->
      <div>
        <a-modal v-model="visible" :title="menu_titles" @ok="handleOk" @cancel="cancel">
          <a-row class="title_type" type="flex" justify="space-around" v-show="title_name">
            <a-col class="title_set" @click="Dash_click(1)">
              <a-col>
                <a-icon type="fund" />
              </a-col>
              <a-col>
                仪表盘
              </a-col>
            </a-col>
          </a-row>

          <a-row justify="space-around" v-show="title_text">
            <a-col class="title_input">
              <a-col :span="4" class="title_input_txt">名称:</a-col>
              <a-col :span="18">
                <a-input placeholder="实例名称" />
              </a-col>
            </a-col>
            <a-col class="title_input_textars">
              <a-col :span="4" class="title_input_textar">描述:</a-col>
              <a-col :span="18">
                <a-textarea placeholder="实例描述" :auto-size="{ minRows: 4, maxRows: 6 }" />
              </a-col>
            </a-col>

          </a-row>
        </a-modal>
      </div>
    </div>

    <desilist v-if="design"></desilist>
  </div>
</template>
<script>

import desilist from "@/views/analysis/modeling/son/assembly/designlist.vue"

export default {
  components: {
    desilist
  },
  data () {
    return {
      openKeys: ['sub1'],
      menu_title: [
        { name: '首页' },
        { name: '1111111112222222222222222222222221' },
        { name: '1111111112222222222222222222222221' },
      ],
      menu_buttom: [
        { name: '新建' }
      ],
      new_class: [
        { name: '是咧', id: 1 },
        { name: '是咧', id: 2 },
      ],
      meterlist: [
        { name: '实例1', icon: '', text: '简介', id: 1 },
        { name: '实例2', icon: '', text: '简介', id: 2 },
        { name: '实例3', icon: '', text: '简介', id: 3 },
        { name: '实例4', icon: '', text: '简介', id: 4 },
        { name: '实例5', icon: '', text: '简介', id: 5 },

      ],
      visible: false, // 弹窗显示
      switch_id: '', // 切换id
      menu_titles: '',  // 弹窗标题
      title_name: true, // 一级弹窗
      title_text: false, // 二级弹窗

      design: false,  // 设计页面显示
    };
  },

  methods: {

    opts () {
      console.log(123456)
    },

    // 设计页面显示
    design_list (val) {
      console.log(1023456)
    },

    // 弹窗结果
    Dash_click (val) {
      if (val == 1) {
        this.title_name = false;
        this.title_text = true;
      }
    },

    //  点击取消
    cancel (val) {
      setTimeout(() => {
        this.title_name = true;
        this.title_text = false;
      }, 500)
    },

    // 弹窗显示
    showModal (val) {
      this.menu_titles = val.name;
      this.visible = true;

    },

    handleOk (e) {
      this.visible = false;
      setTimeout(() => {
        this.title_name = true;
        this.title_text = false;
      }, 500)
    },

    // 点击切换
    class_type (val) {
      this.switch_id = val.id;
    },


    dd (a, v) {
      console.log(a, v)
    },

  },
};
</script>

<style lang="less">
  @import '~@/style/analysis/analysis.less';
</style>

